<template>
  <div class="content">
    <el-dialog title="课程信息录入" :visible.sync="dialogFormVisible" class="dialog">
      <el-form :model="course">
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-col :span="9">
            <el-input v-model="course.name" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="课程人数" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-input v-model="course.number" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="学分" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-input v-model="course.credit" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="课程种类" :label-width="formLabelWidth" >
          <el-col :span="6">
            <el-select v-model="course.courseKind.id">
              <el-option
                v-for="item in kinds"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="执教教师" :label-width="formLabelWidth">
          <el-col :span="6">
            <el-select v-model="course.teacher.id" >
              <el-option
                v-for="item in teachers"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="上课时间" :label-width="formLabelWidth">
          <el-col :span="9">
            <el-input v-model="course.time" ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="课程信息修改" :visible.sync="dialogFormVisible1" class="dialog">
      <el-form :model="courseInfo">
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-col :span="9">
            <el-input v-model="courseInfo.name" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="课程人数" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-input v-model="courseInfo.number" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="学分" :label-width="formLabelWidth">
          <el-col :span="4">
            <el-input v-model="courseInfo.credit" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="课程种类" :label-width="formLabelWidth" >
          <el-col :span="6">
            <el-select v-model="courseInfo.courseKind.id" :placeholder="kind_name">
              <el-option
                v-for="item in kinds"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="执教教师" :label-width="formLabelWidth" >
          <el-col :span="6">
            <el-select v-model="courseInfo.teacher.id" :placeholder="teacher_name">
              <el-option
                v-for="item in teachers"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="上课时间" :label-width="formLabelWidth">
          <el-col :span="9">
            <el-input v-model="courseInfo.time" ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <div>
      <el-input v-model="name" placeholder="请输入课程名称" class="search-input"></el-input>
      <el-button icon="el-icon-search" circle @click="findPageByName"></el-button>
    </div>
    <el-row  type="flex" justify="end">
      <el-col :span="2" ><el-button
        type="primary"
        size="small"
        @click="dialogInit">添加课程</el-button></el-col>
      <el-col :span="2" ><el-button
        type="danger"
        size="small" @click="deleteAll">删除选中</el-button></el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        label="课程名称"
        width="160">
      </el-table-column>
      <el-table-column
        prop="courseKind.name"
        label="课程种类"
        width="160">
      </el-table-column>
      <el-table-column
        prop="number"
        label="限定人数"
        width="160">
      </el-table-column>
      <el-table-column
        prop="credit"
        label="学分"
        width="160">
      </el-table-column>
      <el-table-column
        prop="teacher.name"
        label="执教教师"
        width="160">
      </el-table-column>
      <el-table-column
        prop="time"
        label="上课时间"
        width="160">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        background
        layout="total, prev, pager, next"
        :total="totalSize" class="page">
      </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  name: 'index',
  inject: ['reload'],
  data () {
    return {
      tableData: [],
      ids: [],
      multipleSelection: [],
      teachers: [],
      kinds: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      course: {
        name: '',
        number: '',
        remaining: '',
        credit: '',
        time: '',
        teacher: {
          id: ''
        },
        courseKind: {
          id: ''
        }
      },
      formLabelWidth: '120px',
      courseInfo: {
        name: '',
        number: '',
        credit: '',
        time: '',
        teacher: {
          id: ''
        },
        courseKind: {
          id: ''
        }
      },
      teacher_name: '',
      kind_name: '',
      // 分页参数
      currentPage: 1,
      pageSize: 6,
      totalSize: 0,
      // 要查找的课程名称
      name: ''
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    dialogInit: function () {
      this.dialogFormVisible = true
      this.course.name = ''
      this.course.number = ''
      this.course.time = ''
      this.course.credit = ''
      this.course.teacher.id = ''
      this.course.courseKind.id = ''
    },
    findPage: function () {
      const pageRequest = {
        pageNumber: this.currentPage,
        pageSize: this.pageSize
      }
      this.$api.course.findPage(pageRequest).then((response) => {
        this.tableData = response.content
        this.totalSize = response.totalElements
      }).catch((error) => {
        console.log(error)
      })
    },
    findPageByName: function () {
      const pageRequest = {
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        name: this.name
      }
      this.$api.course.findPageByName(pageRequest).then((response) => {
        this.tableData = response.content
        this.totalSize = response.totalElements
      }).catch((error) => {
        console.log(error)
      })
    },
    handleCurrentChange () {
      if (this.name === '') {
        this.findPage()
      } else {
        this.findPageByName()
      }
    },
    findAllTeacher: function () {
      this.$api.teacher.findAll().then((response) => {
        this.teachers = response
      }).catch((error) => {
        console.log(error)
      })
    },
    findAllKinds: function () {
      this.$api.courseKind.findAll().then((response) => {
        this.kinds = response
      }).catch((error) => {
        console.log(error)
      })
    },
    add: function () {
      if (this.course.name === '') {
        this.dialogFormVisible = false
        this.$errorInfo('课程名称不能为空')
      } else if (this.course.number === '') {
        this.dialogFormVisible = false
        this.$errorInfo('课程人数不能为空')
      } else if (this.course.credit === '') {
        this.dialogFormVisible = false
        this.$errorInfo('学分不能为空')
      } else if (this.course.courseKind.id === '') {
        this.dialogFormVisible = false
        this.$errorInfo('种类不能为空')
      } else if (this.course.teacher.id === '') {
        this.dialogFormVisible = false
        this.$errorInfo('教师不能为空')
      } else if (this.course.time === '') {
        this.dialogFormVisible = false
        this.$errorInfo('上课时间不能为空')
      } else {
        this.course.c_remaining = this.course.num
        this.$api.course.add(this.course).then(response => {
          if (response.code === 200) {
            this.dialogFormVisible = false
            this.$successInfo(response.message)
            this.reload()
          } else {
            this.dialogFormVisible = false
            this.$errorInfo(response.message)
          }
        }).catch(error => {
          this.$errorInfo('网络连接失败')
          console.log(error)
          this.dialogFormVisible = false
        })
      }
    },
    update: function () {
      if (this.courseInfo.name === '') {
        this.dialogFormVisible = false
        this.$errorInfo('课程名称不能为空')
      } else if (this.courseInfo.time === '') {
        this.dialogFormVisible = false
        this.$errorInfo('上课时间不能为空')
      } else if (this.courseInfo.teacher.id === '') {
        this.dialogFormVisible = false
        this.$errorInfo('教师不能为空')
      } else if (this.courseInfo.courseKind.id === '') {
        this.dialogFormVisible = false
        this.$errorInfo('种类不能为空')
      } else {
        this.$api.course.update(this.courseInfo).then(response => {
          if (response.code === 200) {
            this.dialogFormVisible1 = false
            this.$successInfo(response.message)
            this.reload()
          } else {
            this.dialogFormVisible1 = false
            this.$errorInfo(response.message)
          }
        }).catch(error => {
          this.dialogFormVisible1 = false
          this.$errorInfo('网络连接失败')
          console.log(error)
        })
      }
    },
    handleEdit (index, row) {
      this.courseInfo = row
      this.teacher_name = this.courseInfo.teacher.name
      this.kind_name = this.courseInfo.courseKind.name
      this.dialogFormVisible1 = true
    },
    handleDelete (index, row) {
      // eslint-disable-next-line camelcase
      const id = row.id
      this.$api.course.del(id).then(response => {
        if (response.code === 200) {
          this.$successInfo(response.message)
          this.reload()
        } else {
          this.$errorInfo(response.message)
        }
      }).catch(error => {
        this.$errorInfo('网络连接失败')
        console.log(error)
      })
    },
    deleteAll: function () {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.ids.push(this.multipleSelection[i].id)
      }
      if (this.ids.length === 0) {
        this.$errorInfo('当前未选中任何课程')
      } else {
        this.$api.course.delAll(this.ids).then(response => {
          if (response.code === 200) {
            this.$successInfo(response.message)
            this.reload()
            this.ids.length = 0
          } else {
            this.$errorInfo(response.message)
            this.ids.length = 0
          }
        }).catch(error => {
          this.$errorInfo('网络连接失败')
          console.log(error)
          this.course_ids.length = 0
        })
      }
    }
  },
  created () {
    this.findPage()
    this.findAllTeacher()
    this.findAllKinds()
  }
}

</script>

<style scoped lang="scss">
  .content {
    margin-top: 50px;
    position: relative;

    .search-input {
      width: 200px;
      margin-left: 20px;
      margin-right: 20px;
    }

    .page {
      position: absolute;
      top: 290px;
      left: 200px;
    }
  }
</style>
